{% extends 'layout.html' %}
{% load mytags %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">上线单列表</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-chevron-up"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="table-responsive">
                        <div id="toolbar">
                            <a href="{% url 'task_submit' %}" class="btn btn-sm btn-default">
                                <i class="fa fa-plus"></i> 新建上线单
                            </a>
                            <!--<button id="btn_remove" class="btn btn-sm btn-danger">
                                批量删除
                            </button>-->
                        </div>
                        <table id="table">
                        </table>

                    </div>
                    <!-- /.row -->
                </div>
                <!-- ./box-body -->
                <div class="box-footer">
                    <div class="row">
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-footer -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
{% endblock %}

{% block self_footer_js %}
    <script>
        var $table = $('#table'),
            $remove = $('#remove'),
            selections = [];

        function initTable() {
            $table.bootstrapTable({
                method: 'get',
                url: '{% url 'task_getlist' %}',
                toolbar: '#toolbar',
                //指定主键列
                idField: 'id',
                sidePagination: "server",
                //height: getHeight(),
                //设置为 true 会有隔行变色效果
                striped: true,
                search: true,
                showRefresh: true,
                //showToggle: true,
                //showPaginationSwitch: true,
                pagination: true,
                pageSize: 8,
                pageList: [10, 25, 50, 100],
                cache: false,
                clickToSelect: true,
                columns: [
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center'
                    },
                    {
                        field: 'id',
                        title: 'ID',
                        align: 'center',
                        visible: false
                    },
                    {
                        field: 'user',
                        title: '开发者',
                        sortable: true,
                        align: 'center',
                    }
                    , {
                        field: 'project',
                        title: '项目',
                        align: 'center'
                    }
                    , {
                        field: 'title',
                        title: '上线单标题',
                        align: 'center'
                    }
                    , {
                        field: 'updated_at',
                        title: '上线时间',
                        align: 'center'
                    }
                    , {
                        field: 'branch',
                        title: '分支',
                        align: 'center'
                    }
                    , {
                        field: 'commit_id',
                        title: '上线Commit号',
                        align: 'center'
                    }
                    , {
                        field: 'status',
                        title: '当前状态',
                        align: 'center',
                        formatter: statusFormatter
                    }, {
                        field: 'operate',
                        title: '操作',
                        align: 'left',
                        //events: operateEvents,
                        formatter: operateFormatter
                    }

                ]
            })
        }

        function getHeight() {
            return $(window).height() - $('h1').outerHeight(true);
        }

        //操作列方法
        function operateFormatter(value, row, index) {
            //输出内容到控制台，方便调试
            //console.log("dddddd")
            //console.log(row.status)
            s = [];
            switch (row.status) {
                case 0:
                    s = [
                        '<a class="btn btn-xs btn-danger" href="javascript:void(0)" title="Remove">',
                        '<i class="fa fa-trash-o"></i> 删除',
                        '</a>'];
                    break;
                case 1:
                    s = [
                        '<a class="btn btn-xs btn-default" href="/publish/task/deploy" title="deploy">',
                        '<i class="fa fa-cloud-upload"></i> 上线',
                        '</a>  ',
                        '<a class="btn btn-xs btn-danger" href="javascript:void(0)" title="Remove">',
                        '<i class="fa fa-trash-o"></i> 删除',
                        '</a>'
                    ];
                    break;
                case 2:
                    s = [
                        '<a class="btn btn-xs btn-danger" href="javascript:void(0)" title="Remove">',
                        '<i class="fa fa-trash-o"></i> 删除',
                        '</a>'
                    ];
                    break;
                case 3:
                    s = [
                        '<a class="btn btn-xs btn-danger" href="/publish/task/deploy" title="reply">',
                        '<i class="fa fa-mail-reply"></i> 回滚',
                        '</a>  '
                    ];
                    break;
                case 4:
                    s = [
                        '<a class="btn btn-xs btn-default" href="/publish/task/deploy" title="deploy">',
                        '<i class="fa fa-cloud-upload"></i> 上线',
                        '</a>  ',
                        '<a class="btn btn-xs btn-danger" href="javascript:void(0)" title="Remove">',
                        '<i class="fa fa-trash-o"></i> 删除',
                        '</a>'
                    ];
                    break;
            }
            return s.join('');

            /*return [
             '<a class="btn btn-xs btn-default" href="/publish/task/deploy" title="Like">',
             '<i class="fa fa-cloud-upload"></i> 上线',
             '</a>  ',
             '<a class="btn btn-xs btn-danger" href="/publish/task/deploy" title="Like">',
             '<i class="fa fa-mail-reply"></i> 回滚',
             '</a>  ',
             '<a class="btn btn-xs btn-danger" href="javascript:void(0)" title="Remove">',
             '<i class="fa fa-trash-o"></i> 删除',
             '</a>'
             ].join('');*/
        }
        //状态列
        function statusFormatter(value, row, index) {
            //alert(value);
            s = '';
            switch (value) {
                case 0:
                    s = '新提交';
                    break;
                case 1:
                    s = '审核通过';
                    break;
                case 2:
                    s = '<span class="red">审核拒绝</span>';
                    break;
                case 3:
                    s = '<span class="green">上线完成</span>';
                    break;
                case 4:
                    s = '<span class="red">上线失败</span>';
                    break;
            }
            return s;
        }

        $(function () {
            //初始化表格
            initTable();

            // delete button
            $("#btn_remove").click(function () {
                var selected = $table.bootstrapTable('getSelections');
                if ($(selected).length > 0) {
                    BootstrapDialog.confirm({
                        title: "警告",
                        message: "确定删除选中的" + $(selected).length + "个用户吗？",
                        btnCancelLabel: '放弃',
                        btnCancelClass: 'btn-white',
                        btnOKLabel: '确认',
                        btnOKClass: 'btn-default',
                        callback: function (result) {
                            if (result) {
                                var ids = new Array($(selected).length);
                                $.each(selected, function (index, value) {
                                    ids[index] = value.id;
                                });
                                $.post("{% url 'task_submit' %}", {ids: ids}, function (data) {
                                        if (data.code != 0) {
                                            $table.bootstrapTable("refresh");
                                            dialogItself.close();
                                        }
                                        else BootstrapDialog.alert(data.message);

                                    }, "json"
                                );
                            }
                        }
                    });
                }
                else BootstrapDialog.warning("请选择要删除的行");
            });
        });
    </script>
{% endblock %}